<template>
  <div class="apply_box">
    <div class="apply_list">
      <div class="item_apply" style="margin-top: 20px;" v-for="(item, index) in activityList" :key="index">
        <div class="apply_tit">
          {{ item.name }}
        </div>
        <div class="dis_flex mar_bot_7">
          <div class="small_label type_label">类型</div>
          <div>{{ item.type_name }}</div>
        </div>
        <div class="dis_flex">
          <div class="small_label time_label">时间</div>
          <div>{{ convertTimestampToDateTime(item.enroll_start_time) }} - {{
            convertTimestampToDateTime(item.enroll_end_time) }}</div>
        </div>
        <div class="dis_flex mar_top_14">
          <img :src="item.cover" alt="" class="activity_img" />
          <div class="activity_info">
            <div>招募人数：{{ item.max_participation }}</div>
            <div>前置测评：{{ item.is_task == 1 ? '有' : '没有' }}</div>
            <div>发布人员：{{ item.user_name }}</div>
            <div>发布人身份：{{ item.role_name }}</div>
          </div>
        </div>
        <div class="dividing_line"></div>
        <div class="dis_flex just_spa_between">
          <div>当前阶段：{{ getStatus(item.status) }}</div>
          <div class="apply_btn" @click="toSignUp(item)">{{ item.is_bm == 1 ? '已报名' : '我要报名' }}</div>
        </div>
      </div>
    </div>

    <div class="no_data_txt">-- 无更多团体活动了 --</div>
  </div>
</template>

<script>
import { convertTimestampToDateTime } from "@/utils/time";


export default {
  props: {
    activityList: Array
  },
  data() {
    return {
    };
  },
  computed: {
    getStatus() {
      return (ss) => {
        if (ss == 1) return "未开始";
        if (ss == 2) return "报名阶段";
        if (ss == 3) return "签到阶段";
        if (ss == 4) return "实施阶段";
        if (ss == 5) return "已结束";
      };
    },
  },
  created() {
  },
  methods: {
    convertTimestampToDateTime,
    //报名
    toFilter() {
      this.isShowPop = true;
    },
    toSignUp(item) {
      if (item.is_bm == 1) return
      this.$router.push(`/activityDetails?id=${item.id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}

.just_spa_between {
  justify-content: space-between;
}

.just_cont_spa_bet {
  justify-content: space-between;
}

.mar_bot_7 {
  margin-bottom: 7px;
}

.mar_top_14 {
  margin-top: 14px;
}

.apply_box {
  background-color: #f4f6fa;
  font-size: 12px;
  color: #777777;
}

.search_box {
  height: 46.67px;
  line-height: 46.67px;
  padding: 0 16px 0 6.67px;
  background: #ffff;
  margin-top: 10px;
}

.search_input {
  border: 0;
  width: 263.33px;
  height: 33.33px;
  background: #f4f6fa;
  border-radius: 6.67px;
  margin: 0;
}

.item_apply {
  background: #ffffff;
  border-radius: 6.67px;
  padding: 16px 10px 10px 10px;
  margin-bottom: 10px;

  &:first-child {
    border-radius: 0;
  }
}

.apply_tit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 28px;
  color: #000000;
  font-weight: bold;
  font-size: 16.67px;
  margin-bottom: 16.33px;
}

.small_label {
  width: 33.33px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  font-size: 10px;
  border-radius: 3.33px;
  margin-right: 6.67px;
}

.type_label {
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #ff9500;
}

.time_label {
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #29cca6;
}

.activity_img {
  width: 150.67px;
  height: 76.67px;
  margin-right: 9.67px;
}

.activity_info div {
  line-height: 12px;
  margin-bottom: 10px;

  &:last-child {
    margin: 0;
  }
}

.dividing_line {
  margin: 13.33px 0 8.33px;
  border-bottom: 1px solid #333333;
  opacity: 0.2;
}

.apply_btn {
  width: 80px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
  border-radius: 6.67px;
  font-size: 12.67px;
  color: #ffffff;
}

.no_data_txt {
  font-size: 14px;
  margin: 32px auto;
  text-align: center;
}

.filtrate_txt {
  font-size: 14px;
  color: #333333;
  margin: 0 7px 0 10px;
}

.filtrate_img {
  width: 12px;
  height: 13.33px;
}
</style>
